<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>消息推送</title>
    <link rel="stylesheet" href="__CSS__/supplies/bootstrap.min.css" />
    <link rel="stylesheet" href="__JS__/supplies/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="__JS__/supplies/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">

</head>
<style>
    html{
        height: 100%;
    }
    body{
        height: 100% ;
        overflow: hidden;
        margin: 0;
        padding: 0;
        font-family: "微软雅黑";
        background-color: white;
    }
    .table-responsive{
        height:calc(100% - 60px)
    }
    .bootstrap-table{
        height:100%
    }
    .fixed-table-container{
        height:calc(100% - 70px) !important;
    }
    .table thead{background-color: #E4E4E4;}
    .bootstrap-table .table-responsive{margin-top: 0px;}
    .bootstrap-table thead th .th-inner{text-align: center;}
    th {font-weight: normal;}

    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
        color: #555;
        cursor: default;
        background-color: #FCF8F5;
        border: 1px solid #ddd;
        border-bottom-color: transparent;
    }

    table{
        /*text-align: center;*/
        /*border-bottom: 1px solid #ddd;*/
    }
    table th{
        /*text-align: center;*/
    }
    table .text{

        width: 98%;
    }
    table .content{
        text-align: left;
        width: 60%;
    }
    select{
        height: 34px;
    }
    .area select{
        /*margin-right: 10px;*/
    }
    .send-btn button{
       margin-right: 20px;
    }
    .fixed-table-container{
        height: 80%;
    }
    .my_skin .layui-layer-btn a{
        border-color: #999;!important;
        background-color: white;!important;
        color: #333;!important;
    }
    .fixed-width{
        padding-top:10px;!important;
    }
</style>
<body>
<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#record" data-toggle="tab">
            推送记录
        </a>
    </li>
    <li><a href="#send" data-toggle="tab">发送推送通知</a></li>

</ul>

<div id="myTabContent" class="tab-content"style="height: 100%;">
    <div class="tab-pane fade in active" id="record" style="height: 100%;">
        <div class="info" style="background:white;height: 95%;">
            <table class="table" id="record-table">
            </table>
        </div>
    </div>
    <div class="tab-pane fade" id="send" style="background: white;padding-bottom: 10px;">
        <div class="info">
            <table class="table" id="send-table" style="margin-top: 10px;">
                <tbody>
                <tr>
                    <td class="fixed-width" style="padding-top: 15px;" width="160px;">推送对象</td>
                    <td class="form-inline" style="line-height: 40px;">
                        <div class="select form-group">
                            <select id="obj" name="obj" v-model="type" style="width: 150px;" onchange="idShowArea()">
                                <option value="all">全部</option>
                                <option value="user">用户</option>
                                <option value="supplies">商户</option>
                            </select>
                        </div>
                        <div class="select area form-group" style="display: none;">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;选择地区：
                            <select name="country" v-on:change="getAreaList()" v-model="one">
                                <option> 全部 </option>
                                <template v-for="value in data.first">
                                    <option>{{value.admin_name1}}</option>
                                </template>
                            </select>
                            <select style="min-width: 150px;" id="two" name="city" v-on:change="getThirdlyInfo()" v-model="two">
                                <option> 全部 </option>
                                <template v-for="value in second">
                                    <option>{{value}}</option>
                                </template>
                            </select>
                            <select style="min-width: 150px;" id="sel_three" name="street" v-model="three">
                                <option> 全部 </option>
                                <template v-for="value in thirdly">
                                    <option>{{value.admin_name3}}</option>
                                </template>
                            </select>
                        </div>

                    </td>
                </tr>
                <tr>
                    <td class="fixed-width" style="padding-top: 15px;">标题</td>
                    <td style="line-height: 30px;"><input v-model="send_data.title" class="text" /></td>
                </tr>
                <tr>
                    <td class="fixed-width" style="padding-top: 15px;">title</td>
                    <td style="line-height: 30px;"><input v-model="send_data.title_english" class="text" /></td>
                </tr>
                <tr>
                    <td class="fixed-width" style="padding-top: 15px;">内容</td>
                    <td><textarea v-model="send_data.content" rows="5" class="text" ></textarea></td>
                </tr>
                <tr>
                    <td class="fixed-width" style="padding-top: 15px;">content</td>
                    <td><textarea v-model="send_data.content_english" rows="5" class="text" ></textarea></td>
                </tr>
                </tbody>
            </table>
            <div class="send-btn" style="margin-left: 10px;">
                <button class="btn btn-default" v-on:click="sendMsg()">发送(send)</button>
                <button class="btn btn-default">取消(close)</button>
            </div>
        </div>
    </div>

</div>
</body>
<script rel="script" src="__JS__/supplies/jquery.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/bootstrap-table.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script rel="script" src="__JS__/supplies/common.js"></script>
<script rel="script" src="__JS__/supplies/vue.min.js"></script>
<script rel="script" src="__JS__/vue-resource.js"></script>
<script rel="script" src="__JS__/supplies/layer/layer.js"></script>
<script>
    vm = new Vue({
        el : "#myTabContent",
        data : {
            send_data : {
                titel : '',
                content : '',
            },
            type: "all",
            data : {},
            one : "",
            two : "",
            three : "",
            second : [],
            thirdly : [],
        },
        created : function () {
            var url = "{:url('apiShop/Index/getAreaList')}";
            this.$http.post(url).then(function (data) {
                this.data = data.body;
            })
        },
        methods : {
            sendMsg : function () {
                var url = "{:url('admin/Push/pushAll')}";
                this.$http.post(url,{
                    type : this.type,
                    title : this.send_data.title,
                    content : this.send_data.content,
                    title_english : this.send_data.title_english,
                    content_english : this.send_data.content_english,
                    two : this.two,
                    three : this.three
                }).then(function (data) {
                    layer.config({
                        skin:"my_skin"
                    })
                    layer.confirm(data.body.msg, {
                        time: 20000, //20s后自动关闭
                        btn: ['关闭']
                    },function () {
                        location.reload();
                    });
                })
            },
            getAreaList : function () {
                this.second = [];
                for (var i=0 ; i< this.data[this.one].length ;i++)
                {
                    if(this.data[this.one][i].admin_name2)
                    {
                        this.second.push(this.data[this.one][i].admin_name2);
                    }
                }
                if(this.second)
                {
                    $("#two").css("opacity","1");
                }
                else
                {
                    $("#two").css("opacity","0");
                }
            },
            getThirdlyInfo : function () {
                var url = "{:url('apiShop/Index/getAreaChild')}";
                this.$http.post(url,{
                    'name' : this.two,
                }).then(function (data) {
                    if(data.body.status == 200)
                    {
                        this.thirdly = data.body.list;
                        $("#sel_three").show();
                    }
                    else
                    {
                        $("#sel_three").hide();
                    }
                })
            }
        },
    });

    var tableheight = document.documentElement.clientHeight - 150;
    $('#record-table').bootstrapTableEx({
        height: tableheight,
        url: '{:url("admin/Push/pushList")}',
        columns: [
            {
                checkbox: true
            }, {
                field: 'create_time',
                align: 'center',
                title: '时间'
            }, {
                field: 'show_type',
                align: 'center',
                title: '推送对象'
            }, {
                field: 'content',
                align: 'left',
                width:"60%",
                title: '内容'
            },{
                field: 'status',
                align: 'center',
                title: '状态'
            }
        ],

        queryParams: function (params) {
            var param = {
                pageSize: params.pageSize,
                pageNumber: params.pageNumber
            };
            return param;
        },
        responseHandler: function (res) {
            if (res.data) {
                return {
                    rows: res.data,
                    total: res.count
                };
            }
        }
    });

    function idShowArea() {
        var options=$("#obj option:selected");
//        if("user" == options.val()){
//            $(".area").show();
//        }else{
//            $(".area").hide();
//        }
    }
    function doSome(){

    }

</script>
</html>